<template>
  <div id="app">
    <div class="head">
      <div class="heard">
        <div class="first">
          <span style="color: #008cd6">请登录</span>
          <span class="span">|</span>
          <span style="margin-right:40px" class="zhu">注册</span>
          <span>新闻：富连网商城系统优化升级公告</span>
        </div>
        <div class="two">
          <Dropdown>
            <a href="javascript:void(0)">
              我的富连网
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem>我的订单</DropdownItem>
              <DropdownItem>我的优惠卷</DropdownItem>
              <DropdownItem>我的收藏</DropdownItem>
              <DropdownItem>站内线</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <span class="span">|</span>
          <span style="color: #008cd6">购物车(0)</span>
          <span class="span">|</span>
          <span>在线客服</span>
          <span class="span">|</span>
          <Dropdown>
            <a href="javascript:void(0)">
              客户服务
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem>购物指南</DropdownItem>
              <DropdownItem>收后服务</DropdownItem>
              <DropdownItem>意见反馈</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
    </div>
    <div class="page">
      <div class="login">
        <img
          src="https://pic.flnet.com/public/images/e3/00/44/04945634e9913ace345dd4b0ba981a45ae89dcc9.png?1529478916#w"
          alt
        />
      </div>
      <div class="con">
        <div class="content">
          <input type="text" placeholder="优选 全自动加厚黑胶防晒晴雨伞" />
          <button>搜索</button>
        </div>
        <ul>
          <li>
            <a href="#" style="color:#008cd6">【百万补贴】电动牙刷包邮价39元</a>
          </li>
          <li>
            <a href="#">员工福利专享</a>
          </li>
          <li>
            <a href="#">郭妈妈金钻凤梨酥</a>
          </li>
        </ul>
      </div>
      <div class="er">
        <img src="./img/er.png" alt />
      </div>
    </div>
    <div class="nav">
      <div>
        <a href="javascript:void(0)">
          商品分类
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <ul>
          <li>
            <a href="#">手机/数码/配件</a>
          </li>
          <li>
            <a href="#">电脑/办公</a>
          </li>
          <li>
            <a href="#">智能家电</a>
          </li>
          <li>
            <a href="#">美妆/个人护理</a>
          </li>
          <li>
            <a href="#">鞋服/配饰/箱包</a>
          </li>
          <li>
            <a href="#">家居/家纺</a>
          </li>
          <li>
            <a href="#">母婴/智能教育</a>
          </li>
          <li>
            <a href="#">食品健康</a>
          </li>
          <li>
            <a href="#">国际优选</a>
          </li>
        </ul>
      </div>
      <p>
        <span>地方特产</span>
        <span>小富优选</span>
        <span>诺基亚品牌</span>
        <span>夏普家电</span>
        <span>企业团购</span>
        <span>推广员专区</span>
      </p>
    </div>
    <!-- <div id="slider">
      <div class="window" @mouseover="stop" @mouseleave="play">
        <ul class="container" :style="containerStyle">
          <li>
            <img :style="{width:imgWidth+'px'}" :src="sliders[sliders.length - 1].img" alt />
          </li>
          <li v-for="(item, index) in sliders" :key="index">
            <img :style="{width:imgWidth+'px'}" :src="item.img" alt />
          </li>
          <li>
            <img :style="{width:imgWidth+'px'}" :src="sliders[0].img" alt />
          </li>
        </ul>
        <ul class="direction">
          <li class="left" @click="move(796, 1, speed)">
            <svg
              class="icon"
              width="30px"
              height="30.00px"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill="#ffffff"
                d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
              />
            </svg>
          </li>
          <li class="right" @click="move(796, -1, speed)">
            <svg
              class="icon"
              width="30px"
              height="30.00px"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill="#ffffff"
                d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
              />
            </svg>
          </li>
        </ul>
        <ul class="dots">
          <li
            v-for="(dot, i) in sliders"
            :key="i"
            :class="{dotted: i === (currentIndex-1)}"
            @click="jump(i+1)"
          ></li>
        </ul>
      </div>
    </div> -->
    <!-- <div class="zuo">
      <img src="./img/7.png" alt />
    </div>
    <div class="you">
      <ul>
        <li>
          <img
            src="https://pic.flnet.com/public/images/f7/2e/86/fac8097333339b2131bc0268470a01facdd6c646.jpg?1563756812#w"
            alt
          />
        </li>
        <li>
          <img
            src="https://pic.flnet.com/public/images/ec/f2/7c/00922af04e96114bfa948e074c672a2d702f26f6.jpg?1564122111#w"
            alt
          />
        </li>
        <li>
          <img
            src="https://pic.flnet.com/public/images/f2/d9/00/707a4ec4fec5413037a9e81f499af870983c12bf.jpg?1564359131#w"
            alt
          />
        </li>
      </ul>
    </div>
    <div class="bian">
      <img src="./img/8.png" alt />
    </div> -->
    <router-view />
    <div class="help">
      <div class="item">
        <ul>
          <li>
            <img src="https://pic.flnet.com/themes/lanyan/images/logo_fff.png" alt />
          </li>
          <li>
            <img class="pics" src="./img/zheng.png" alt />
            <div>
              <h2>质量放心</h2>
              <span>全场正品100%</span>
            </div>
          </li>
          <li>
            <img class="pics" src="./img/shop.png" alt />
            <div>
              <h2>购物安心</h2>
              <span>快速送达</span>
            </div>
          </li>
          <li>
            <img class="pics" src="./img/xin.png" alt />
            <div>
              <h2>服务贴心</h2>
              <span>7天退货 15天换货%</span>
            </div>
          </li>
        </ul>
        <div class="helpCard">
          <ul>
            <li>
              <h2>关于我们</h2>
              <span>联系我们</span>
            </li>
            <li>
              <h2>购物指南</h2>
              <span>购物条款</span>
              <span>购物流程</span>
              <span>购物常见问题</span>
            </li>
            <li>
              <h2>支付及发票</h2>
              <span>支付方式</span>
              <span>支付说明</span>
              <span>发票说明</span>
            </li>
            <li>
              <h2>配送方式</h2>
              <span>运费收取说明</span>
              <span>发货与签收</span>
              <span>配送说明</span>
              <span>大件商品服务</span>
            </li>
            <li>
              <h2>售后服务</h2>
              <span>售后政策</span>
              <span>退换货流程</span>
              <span>售后说明</span>
              <span>取消订单说明</span>
              <span>退款说明</span>
            </li>
            <li>
              <h2>会员介绍</h2>
              <span>会员说明</span>
            </li>
            <li class="last">
              <div>400-823-1900</div>
              <p class="tel_tit">周一至周六9:00-18:00</p>
              <span>（法定节假日除外）</span>
              <p class="ke">在线客服</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="foot">
        <ul>
          <li>
            <span>常见问题</span>
            <span>|</span>
            <span>在线客服</span>
            <span>|</span>
            <span>新闻中心</span>
            <span>|</span>
            <span>问题反馈</span>
          </li>
        </ul>
        <ol>
          <li>
            <span>富连网</span>
            <span>富学宝典</span>
            <span>智能手机</span>
            <span>平板电视</span>
            <span>空气净化器</span>
            <span>母婴学堂</span>
          </li>
        </ol>
        <div class="wei">
          <p>
            <span>Copyright © 2009-2018</span>
            <span>深圳市理约云信息管理有限公司</span>
            <span>| 粤ICP备14036938号-7 |</span>
            <span>粤公网安备 44030902001497号</span>
          </p>
          <p class="phone">服务电话：0371-89908401 &nbsp;&nbsp; 邮箱：service@flnet.com</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// export default {
//   name: "slider",
//   props: {
//     initialSpeed: {
//       type: Number,
//       default: 30
//     },
//     initialInterval: {
//       type: Number,
//       default: 3
//     }
//   },
//   data() {
//     return {
//       sliders: [
//         {
//           img: require("./img/1.jpg")
//         },
//         {
//           img: require("./img/2.jpg")
//         },
//         {
//           img: require("./img/3.jpg")
//         },
//         {
//           img: require("./img/4.jpg")
//         },
//         {
//           img: require("./img/5.jpg")
//         },
//         {
//           img: require("./img/6.jpg")
//         }
//       ],
//       imgWidth: 796,
//       currentIndex: 1,
//       distance: -796,
//       transitionEnd: true,
//       speed: this.initialSpeed,
//       list: []
//     };
//   },
//   computed: {
//     containerStyle() {
//       return {
//         transform: `translate3d(${this.distance}px, 0, 0)`
//       };
//     },
//     interval() {
//       return this.initialInterval * 1000;
//     }
//   },
//   mounted() {
//     this.init();
//   },
//   methods: {
//     init() {
//       this.play();
//       window.onblur = function() {
//         this.stop();
//       }.bind(this);
//       window.onfocus = function() {
//         this.play();
//       }.bind(this);
//     },
//     move(offset, direction, speed) {
//       if (!this.transitionEnd) return;
//       this.transitionEnd = false;
//       direction === -1
//         ? (this.currentIndex += offset / 796)
//         : (this.currentIndex -= offset / 796);
//       if (this.currentIndex > 6) this.currentIndex = 1;
//       if (this.currentIndex < 1) this.currentIndex = 6;

//       const destination = this.distance + offset * direction;
//       this.animate(destination, direction, speed);
//     },
//     animate(des, direc, speed) {
//       if (this.temp) {
//         window.clearInterval(this.temp);
//         this.temp = null;
//       }
//       this.temp = window.setInterval(() => {
//         if (
//           (direc === -1 && des < this.distance) ||
//           (direc === 1 && des > this.distance)
//         ) {
//           this.distance += speed * direc;
//         } else {
//           this.transitionEnd = true;
//           window.clearInterval(this.temp);
//           this.distance = des;
//           if (des < -4776) this.distance = -796;
//           if (des > -796) this.distance = -4776;
//         }
//       }, 20);
//     },
//     jump(index) {
//       const direction = index - this.currentIndex >= 0 ? -1 : 1;
//       const offset = Math.abs(index - this.currentIndex) * 796;
//       const jumpSpeed =
//         Math.abs(index - this.currentIndex) === 0
//           ? this.speed
//           : Math.abs(index - this.currentIndex) * this.speed;
//       this.move(offset, direction, jumpSpeed);
//     },
//     play() {
//       if (this.timer) {
//         window.clearInterval(this.timer);
//         this.timer = null;
//       }
//       this.timer = window.setInterval(() => {
//         this.move(796, -1, this.speed);
//       }, this.interval);
//     },
//     stop() {
//       window.clearInterval(this.timer);
//       this.timer = null;
//     }
//   }
// };
</script>

<style>
.nav ol {
  position: absolute;
  top: 40px;
  left: 160px;
}
.nav div ul {
  width: 190px;
  height: 445px;
  background: rgba(0, 0, 0, 0.75);
}
.nav ul li:hover {
  background: #fff;
  color: #333;
}
.nav a:hover {
  color: #333;
}
.nav {
  font-size: 16px;
  width: 190px;
  text-indent: 40px;
  cursor: pointer;
  min-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}
.nav p {
  text-align: center;
  margin-left: -35px;
  color: #333;
}
.nav p span {
  line-height: 40px;
  font-size: 15px;
  padding: 0px 13px;
  color: #000;
  font-weight: bold;
}
.nav p span:hover {
  color: #008cd6;
}
.nav div {
  background: #008cd6;
  width: 190px;
  height: 40px;
  line-height: 40px;
}
.nav a {
  color: #fff;
  padding: 10px 10px;
  box-sizing: border-box;
}
.zhu:hover {
  color: #008cd6;
}
.page .er {
  margin-top: 16px;
}
.page .login {
  margin: 25px 0 0;
  max-height: 80px;
  width: 290px;
  overflow: hidden;
}
.con {
  margin-left: 60px;
  margin-top: 35px;
  height: 70px;
  width: 564px;
}
.content input {
  width: 420px;
  height: 40px;
  padding: 3px 10px;
  float: left;
  border: 2px solid #008cd6;
}
.content button {
  width: 120px;
  height: 40px;
  float: left;
  text-align: center;
  background-color: #008cd6;
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  outline: none;
  border: none;
}
.content {
  height: 40px;
  display: flex;
}
.con ul {
  display: flex;
  margin-top: 8px;
}
.con ul li a {
  padding: 0px 10px;
  line-height: 1em;
  display: inline-block;
  vertical-align: top;
  color: #999;
}
.con ul li a:hover {
  color: #008cd6;
}
.page {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.head {
  width: 100%;
  background-color: #f1f1f1;
  border-bottom: 1px solid #dddddd;
  cursor: pointer;
}
.heard {
  width: 1200px;
  margin: 0 auto;
  min-width: 1200px;
  z-index: 1;
  font-size: 12px;
  height: 41px;
  line-height: 41px;
  color: #777777;
}
.heard div .span {
  display: inline-block;
  height: 41px;
  width: 40px;
  text-align: center;
}
.first {
  float: left;
}
.two {
  float: right;
}
.footer {
  background: #eee;
  padding: 20px 0;
}
.foot ul,
.foot ol {
  color: #7a7a7a;
  margin-bottom: 25px;
}
.foot p span {
  padding: 0;
}
.foot p {
  margin-bottom: 9px;
  color: #7a7a7a;
}
.foot .phone {
  font-size: 14px;
}
.wei {
  padding: 20px 0;
}
.foot span {
  padding: 0px 15px;
}
.foot {
  text-align: center;
  width: 1200px;
  margin: 0 auto;
}
.help {
  margin-bottom: 60px;
}
.item .helpCard li p {
  font-size: 16px;
  font-weight: 400;
}
.item .helpCard {
  padding-top: 30px;
}
.item .helpCard .last span {
  margin: 0;
}
.item .helpCard .ke {
  height: 39px;
  line-height: 39px;
  background: #008cd6;
  color: #fff;
  margin-top: 11px;
}
.item .helpCard .last {
  width: 264px;
  text-align: center;
}
.item .helpCard div {
  font-size: 25px;
  color: rgb(0, 140, 214);
}
.item .helpCard ul li h2 {
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 800;
  line-height: 30px;
  color: #000;
}
.item .helpCard ul {
  border: none;
}
.item .helpCard ul li {
  margin-left: 27px;
}
.item .helpCard ul li span {
  display: block;
  color: #7a7a7a;
  max-width: 100%;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 5px 0;
  font-size: 12px;
}
.item {
  padding: 30px 0;
  background: #ffffff;
  width: 1200px;
  margin: 0 auto;
}
.item ul {
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding-bottom: 30px;
}
.item ul li {
  margin-left: 50px;
  width: 240px;
  height: 60px;
  display: inline-block;
}
.item ul li h2 {
  color: #323232;
  font-size: 18px;
  line-height: 35px;
}
.item span {
  display: block;
  line-height: 20px;
  color: #888888;
  font-size: 16px;
}
.item ul li .pics {
  width: 60px;
  height: 60px;
  margin-right: 5px;
  float: left;
}
a {
  color: inherit;
  text-decoration: none;
  color: #777;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>
